<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <form action="###">
            <p>请输入用户名: <input type="text" v-model="username" /></p>
            <p>你是否同意该协议 <input type="checkbox" v-model="isAgree" /></p>
            <p>
                请选择你喜欢的学科(多选)
                <input type="checkbox" value="html" v-model="like" />html
                <input type="checkbox" value="css" v-model="like" />css
                <input type="checkbox" value="js" v-model="like" />js
                <input type="checkbox" value="react" v-model="like" />react
                <input type="checkbox" value="vue" v-model="like" />vue
            </p>

            <p>
                请选择你要就业的城市
                <input type="radio" value="西安" v-model="city" />西安
                <input type="radio" value="深圳" v-model="city" />深圳
                <input type="radio" value="武汉" v-model="city" />武汉
                <input type="radio" value="杭州" v-model="city" />杭州
            </p>
            <!-- 
              v-model收集下拉列表的内容
                如果下拉列表单选,则使用字符串进行收集
                如果下拉列表多选,则使用数组进行收集
             -->
            <p>
                请选择你喜欢的球队
                <select v-model="football">
                    <option value="阿根廷">阿根廷</option>
                    <option value="法国">法国</option>
                    <option value="德国">德国</option>
                    <option value="意大利">意大利</option>
                    <option value="巴西">巴西</option>
                    <option value="国足">国足</option>
                </select>
            </p>
            <p>
                请选择你同桌喜欢的球队
                <select v-model="footballs" multiple>
                    <option value="阿根廷">阿根廷</option>
                    <option value="法国">法国</option>
                    <option value="德国">德国</option>
                    <option value="意大利">意大利</option>
                    <option value="巴西">巴西</option>
                    <option value="国足">国足</option>
                </select>
            </p>
            <p>
                请发表你对国足的看法!!!
                <textarea v-model="message"></textarea>
            </p>
        </form>
    </div>
</body>

</html>
<script src="../../../vue.js"></script>
<script>
    Vue.config.productionTip = false;

    const vm = new Vue({
        el: "#app",
        data() {
            return {
                username: "laowang",
                isAgree: false,
                like: [],
                city: "",
                football: "",
                footballs: [],
                message: "退钱!!!",
            };
        },
    });
</script>